import PropTypes from "prop-types";
import React, { memo, useState } from "react";
import RoomItemWrapper from "./style";
import { Rating } from "@mui/material";
import { Carousel } from "antd";
import IconArrowLeft from "@/assets/svg/icon-arrow-left";
import IconArrowRight from "@/assets/svg/icon-arrow-right";
import { createRef } from "react";
import Indicator from "@/base-ui/Indicator";
import classNames from "classnames";

const RoomItemV2 = memo((props) => {
  // 定义初始索引
  const [selectIndex, setSelectIndex] = useState(0);
  const { itemData, itemrWidth,itemClick } = props;
  const slickRef = createRef();
  // 定义切换图片
  function imgClickHandle(isClick = true) {
    isClick ? slickRef.current.prev() : slickRef.current.next();
    // 判断指示器
    let length = itemData.picture_urls.length;
    let index = isClick ? selectIndex - 1 : selectIndex + 1;
    // 下一步大于总长度的时候，索引为0
    if (index > length - 1) index = 0;
    // 上一步0-1的时候，去到索引最大
    if (index < 0) index = length - 1;
    setSelectIndex(index);
  }
  // 获取父传递过来的方法
  function itemClickHandle(){
    if(itemClick) itemClick(itemData)
  }


  // 定义接收轮播图和图片元素的变量
  const coverImg = (
    <div className="cover">
      <img src={itemData.picture_url} />
    </div>
  );
  const swiperImg = (
    <div className="swiper">
      <div className="control">
        <div className="left btn" onClick={(e) => imgClickHandle(true)}>
          <IconArrowLeft height="30" width="30" />
        </div>
        <div className="right btn" onClick={(e) => imgClickHandle(false)}>
          <IconArrowRight height="30" width="30" />
        </div>
      </div>
      <div className="indicator">
        <Indicator currIndex={selectIndex}>
          {itemData?.picture_urls?.map((item, index) => {
            return (
              <span className="dots" key={index}>
                <span
                  className={classNames("dot", {
                    active: index === selectIndex,
                  })}
                ></span>
              </span>
            );
          })}
        </Indicator>
      </div>
      <Carousel ref={slickRef} dots={false}>
        {itemData?.picture_urls?.map((item, index) => {
          return (
            <div className="cover" key={index}>
              <img src={item} />
            </div>
          );
        })}
      </Carousel>
    </div>
  );
  return (
    <RoomItemWrapper
      textcolor={itemData?.verify_info?.text_color || "#39576a"}
      itemwidth={itemrWidth}
      onClick={itemClickHandle}
    >
      <div className="inner">
        {!itemData.picture_urls ? coverImg : swiperImg}
        <div className="content">
          <div className="desc">
            {itemData.verify_info.messages.join(" · ")}
          </div>
          <div className="name">{itemData.name}</div>
          <div className="price">￥{itemData.price}/晚</div>
          <Rating
            name="simple-controlled"
            value={itemData.star_rating ?? 5}
            precision={0.1}
            sx={{ fontSize: "12px", color: "#00848A" }}
          />
          <span className="count">{itemData.reviews_count}</span>
          {itemData.bottom_info && (
            <span className="extra">· {itemData.bottom_info?.content}</span>
          )}
        </div>
      </div>
    </RoomItemWrapper>
  );
});

RoomItemV2.propTypes = {
  itemData: PropTypes.object,
  itemrWidth: PropTypes.string,
  itemClick: PropTypes.func
};

export default RoomItemV2;
